<template>
  <div class="app-container">

    <div style="margin: 20px;"></div>
    <el-form label-width="120px" :rules="rules" :model="hospitalSet" ref="hospitalSet">
      <el-form-item label="医院名称" prop="hosname">
        <el-input v-model="hospitalSet.hosname"></el-input>
      </el-form-item>
      <el-form-item label="医院编号" prop="hoscode">
        <el-input v-model="hospitalSet.hoscode"></el-input>
      </el-form-item>
      <el-form-item label="api基础路径" prop="apiUrl">
        <el-input v-model="hospitalSet.apiUrl"></el-input>
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contactsName">
        <el-input v-model="hospitalSet.contactsName"></el-input>
      </el-form-item>
      <el-form-item label="联系人手机" prop="contactsPhone">
        <el-input v-model="hospitalSet.contactsPhone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate('hospitalSet')">提交</el-button>
        <el-button @click="resetForm('hospitalSet')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import hospset from '@/api/hospset.js'
  export default {
    data() {
      var checkPhone = (rule, value, callback) => {
        setTimeout(() => {
          if(value.length != 11) {
            callback(new Error('手机号码不合法'));
          } else {
            callback();
          }
        })
      }

      return{
        hospitalSet: {
          hosname: '',
          hoscode: '',
          apiUrl: '',
          contactsName: '',
          contactsPhone: ''
        },
        rules: {
          hosname: [
            { required: true, message: '请输入医院名称', trigger: 'blur' },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          hoscode: [
            { required: true, message: '请输入医院编号', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
          ],
          apiUrl: [
            { required: true, message: '请输入api基础路径', trigger: 'blur' },
            { min: 4, max: 50, message: '长度在 4 到 50 个字符', trigger: 'blur' }
          ],
          contactsName: [
            { required: true, message: '请输入联系人名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          contactsPhone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' }
          ]
        }
      };
    },

    created() {   //页面渲染之前执行
      //获取路由id值,调用接口得到医院设置信息
      if(this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getHospSet(id);
      } else {
        //表单数据清空
        this.hospitalSet = {}
      }
    },

    methods:{
      //表单清空
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.hospitalSet = "";
      },

      //添加
      saveOrUpdate() {
        if(this.hospitalSet.id) {
          hospset.updateHospSetInfo(this.hospitalSet)
            .then(response => {
              //提示信息
                this.$message({
                type: 'success',
                message: '修改成功!'
              });
              //跳转列表页面，使用路由跳转方式
              this.$router.push(({path: '/hospSet/list'}))
            }).catch(() => {
                this.$message({
                type: 'error',
                message: '修改失败!'
              });
            })
        } else {
          hospset.saveHospSetInfo(this.hospitalSet)
            .then(response => {
                //提示信息
                this.$message({
                type: 'success',
                message: '添加成功!'
              });

              //跳转列表页面，使用路由跳转方式
              this.$router.push(({path: '/hospSet/list'}))
            }).catch(() => {
                this.$message({
                type: 'error',
                message: '添加失败!'
              });
            })
        }
      },

      //根据id查询
      getHospSet(id) {
        hospset.getHospSetInfo(id)
          .then(response => {
            this.hospitalSet = response.data
          }).catch(() => {
            this.$message({
            type: 'error',
            message: '获取数据失败'
          });
        })
      }
    }
  }
</script>

<style>
</style>
